<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        
        #main {
            margin: 100px auto;
            width: 750px;
            height: 315px;
            overflow: hidden;
            position: relative;
        }
        
        #banner li {
            width: 750px;
            height: 315px;
        }
        
        .banner-slide,
        img {
            width: 750px;
            height: 315px;
        }
        /*数字*/
        
        #dots {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        
        #dots li {
            float: left;
            background-color: #f90;
            color: #fff;
            font-weight: bold;
            font-size: 15px;
            height: 20px;
            line-height: 20px;
            width: 20px;
            margin-right: 1px;
            text-align: center;
            border-radius: 50%;
            cursor: pointer;
        }
        
        #dots .li1 {
            color: red;
        }
        /*按钮*/
        
        .move {
            position: absolute;
            width: 20px;
            height: 30px;
            line-height: 30px;
            top: 50%;
            margin-top: -15px;
            background: rgba(0, 0, 0, .2);
            text-decoration: none;
            color: white;
            display: none;
            outline: none;
            -moz-user-select: none;
            /*火狐*/
            -webkit-user-select: none;
            /*webkit浏览器*/
            -ms-user-select: none;
            /*IE10*/
            -khtml-user-select: none;
            /*早期浏览器*/
            user-select: none;
        }
        
        #next {
            text-align: right;
            right: 0;
        }
        
        #main:hover .move {
            display: block;
        }
        
        .move:hover {
            color: orange;
        }
    </style>
</head>

<body>
    <div id="main">
        <div id="banner">
            <a href="#">
                <div class="banner-slide slide1 slide-active">
                    <img src="images/01.jpg">
                </div>
            </a>
            <a href="#">
                <div class="banner-slide slide2">
                    <img src="images/02.jpg">
                </div>
            </a>
            <a href="#">
                <div class="banner-slide slide3">
                    <img src="images/03.jpg">
                </div>
            </a>
            <a href="#">
                <div class="banner-slide slide4">
                    <img src="images/04.jpg">
                </div>
            </a>
            <a href="#">
                <div class="banner-slide slide5">
                    <img src="images/05.jpg">
                </div>
            </a>
        </div>
        <!-- 数字 -->
        <div class="dots">
            <ul id="dots">
                <li class="li1">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <!-- 按钮 -->
        <div id="left-right">
            <div class="move" id="prev">&lt;</div>
            <div class="move" id="next">&gt;</div>
        </div>
    </div>

    <script>
        var main = document.querySelector('#main');
        var pics = document.querySelector('#banner').querySelectorAll('div');
        var dots = document.querySelector('#dots').querySelectorAll('li');
        var banner = document.querySelector('#banner');
        var prev = document.querySelector('#prev');
        var next = document.querySelector('#next');
        var len = pics.length;
        var index = 0;
        var timer = null;

        function solide() {
            // 鼠标移动到main区域停止计时器
            main.onmouseover = function() {
                if (timer) {
                    clearInterval(timer);
                }
            }
            banner.onmouseout = function() {
                // 鼠标离开main区域开启计时器
                timer = setInterval(function() {
                    index++;
                    if (index >= len) {
                        index = 0;
                    }
                    changImg();
                }, 2000);
            }
            banner.onmouseout();
            // 圆点切换
            for (var j = 0; j < len; j++) {
                dots[j].index = j;
                dots[j].onmouseover = function() {
                    index = this.index;
                    changImg();
                }
            }

            // 左键切换
            prev.onclick = function() {
                    index--;
                    if (index < 0) {
                        index = len - 1;
                    }
                    changImg();
                }
                // 右键切换
            next.onclick = function() {
                index++;
                if (index >= len) {
                    index = 0;
                }
                changImg();
            }
        }
        solide();
        /*图片自动切换*/
        function changImg() {
            for (var i = 0; i < len; i++) {
                pics[i].style.display = 'none';
                dots[i].className = "";
            }
            pics[index].style.display = 'block';
            dots[index].className = 'li1';
        }
    </script>
</body>

</html>